<div class="main_content queues monitoring white_design">
    <monitoring-tabs></monitoring-tabs>
    <div class="tab-content">
        <div class="block">
          <h2 class="pointer" (click)="openedBlock = 'monitor'" i18n="@@html.storage_verification">Storage verification</h2>
          <div class="block_content" *ngIf="openedBlock === 'monitor'">
            <div class="filter_line">
              <div class="filter_block">
                <filter-generator [schema]="filterSchema" filterIdTemplate="storage-verification-filter" [model]="filterObject" (submit)="onSubmit($event)" (onChange)="onFormChange($event)"></filter-generator>
                <div class="filter">
                  <div class="filter_block auto_reloader">
                    <table>
                      <tr *ngFor="let status of Object.keys(statusValues)" [ngClass]="{'gray':statusValues[status]?.count == '0','red':statusValues[status]?.count=='!'}">
                        <td>{{status}}:</td>
                        <td *ngIf="!statusValues[status]?.loader">{{statusValues[status]?.count}}</td>
                        <td *ngIf="statusValues[status]?.loader"><i class="fa fa-circle-o-notch fa-spin dashboard_loader"></i></td>
                      </tr>
                    </table>

                    <div class="option_block">
                      <div class="interval_block">
                        <label i18n="@@interval">Interval:</label>
                        <input type="text"  i18n-placeholder="@@placeholder.storage-verification.interval" placeholder="Interval" [(ngModel)]="interval">
                        <span>s</span>
                      </div>
                      <button class="btn-default submit" (click)="toggleAutoRefresh()">
                        <div class="spinnter_container">
                          <span *ngIf="!timer.started" class="glyphicon glyphicon-refresh"></span>
                          <mat-progress-spinner *ngIf="timer.started" mode="indeterminate" [diameter]="20" ></mat-progress-spinner>
                        </div>
                        <span *ngIf="!timer.started">{{timer.startText}}</span>
                        <span *ngIf="timer.started">{{timer.stopText}}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="filter_line">
              <div class="filter_block">
                <div class="filter single_block" [permission]="{id:'action-monitoring->external_retrieve-all_action',param:'visible'}">
                  <div class="filter_block">
                    <div class="line">
                      <div (click)="downloadCsv()" class="w45percent csv_button"><span class="custom_icon csv_icon"></span><span class="text" i18n="@@download_csv">Download CSV</span></div>
                      <mat-select [(ngModel)]="allAction"  i18n-placeholder="@@placeholder.all_actions" placeholder="All actions" (selectionChange)="allActionChanged($event)" floatPlaceholder="never">
                        <mat-option value="{{actions.value}}" *ngFor="let actions of allActionsOptions">{{actions.label}}</mat-option>
                      </mat-select>
                    </div>
                  </div>
                  <div class="filter_block">
                    <div class="line">
                      <div class="checkbox_button pull-left" [ngClass]="{'active':batchGrouped}"><mat-checkbox [(ngModel)]="batchGrouped" (ngModelChange)="storageVerifications = [];filterObject.offset = 0" i18n="@@batch_id_grouped">Batch ID grouped</mat-checkbox></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="left_arrow arrow"  *ngIf="storageVerifications && storageVerifications.length && storageVerifications.length > 0" [ngClass]="{'active':filterObject.offset > 0}" (click)="prev()"><span class="glyphicon glyphicon glyphicon-chevron-left"></span></div>
              <div class="right_arrow arrow" *ngIf="storageVerifications && storageVerifications.length && storageVerifications.length > 0" [ngClass]="{'active':moreTasks}" (click)="next()"><span class="glyphicon glyphicon glyphicon-chevron-right"></span></div>
              <table-generator *ngIf="tableConfig && storageVerifications && storageVerifications.length && storageVerifications.length > 0" [config]="tableConfig" [models]="storageVerifications" [stringifyDetailAttributes]="true"></table-generator>
            </div>
          </div>
        </div>
    </div>
</div>